<!--
 * @Author: 计都 3038199036@qq.com
 * @Date: 2024-09-24 15:41:38
 * @LastEditors: 计都 3038199036@qq.com
 * @LastEditTime: 2024-10-11 11:09:37
 * @FilePath: \express_file_upload-master\views\filelist.html
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文件列表</title>
    <link rel="icon" type="image/x-icon" href="favicon.ico" />
    <style>
        @font-face {
            font-family: "baseFont";
            src: url("/static/font/OPPOSans-B-2.ttf");
        }

        * {
            font-family: "baseFont";
            font-weight: bolder;
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            text-decoration: none;
            word-wrap: break-word;
            word-break: keep-all;
            scrollbar-width: none;
            /* firefox */
            -ms-overflow-style: none;
            /* IE 10+ */
        }

        *::-webkit-scrollbar {
            display: none;
            /* Chrome Safari */
        }

        h4 {
            background-color: #414181;
            color: white;
            text-indent: 20px;
            padding: 10px;
            margin: 10px;
            border-radius: 1rem;
        }

        button {
            position: absolute;
            right: 20px;
            border: none;
            border-radius: 1rem;
            background-color: #414181;
            color: white;
            padding: 0 5px;
            font-size: 15px;
            font-weight: 300;
        }

        button:active {
            background-color: white;
            color: #414181;
        }

        li {
            margin-top: 10px;
            border-bottom: 1px solid white;
        }

        .bg_container {
            position: fixed;
            top: 0;
            left: 0;
            z-index: -999;
            width: 100vw;
            height: 100vh;
            background: linear-gradient(45deg,
                    #3498db,
                    #2ecc71);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

            overflow: hidden;
        }

        .bg_container::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            z-index: -999;
            width: 100vw;
            height: 100vh;
            background-image: linear-gradient(90deg,
                    rgba(255, 255, 255, 0.1) 1px,
                    transparent 1px),
                linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px);
            background-size: 20px 20px;
            pointer-events: none;
            /* Allow clicking through the pattern layer */
        }

        .fileNum {
            background-color: #414181;
            color: white;
            padding: 5px 20px;
            margin: 1px;
            width: max-content;
            border-radius: 1rem;
            font-size: xx-small;
        }

        .downloadBtn {
            background-color: #414181;
            color: white;
            font-weight: 100;
            font-size: x-small;
            padding: 1px 10px;
            border-radius: 1rem;
            /* opacity: .5;
            transition: opacity .5s cubic-bezier(0, 0, 0, 1); */
        }

        .root,
        .section {
            position: relative;
            margin: 10px;
            background-color: #d6d6e5c5;
            color: #414181;
            padding: 10px 10px 10px 40px;
            margin: 0 10px 10px 10px;
            border-radius: 1rem;
        }

        .section {
            display: flex;
            flex-wrap: nowrap;
            justify-content: left;
            align-items: center;
            padding: 5px;
            gap: 10px;
        }

        .section>a {
            font-size: 12px;
            background-color: #414181;
            border-radius: 1rem;
            padding: 5px 20px 5px 20px;
            color: white;
            border: 1px solid #414181;
            transition: all .3s cubic-bezier(0, 0, 0, 1);
        }

        .section>a:hover {
            background-color: #d6d6e5;
            color: #414181;
        }
    </style>
</head>

<body>
    <h4>文件列表</h4>
    <div class="section">
        <a href="/">上传文件</a>
        <a href="/handleFile">文件归档</a>
        <span id="checkSafety">未通过检查&nbsp;<a href="/" style="color: crimson;">去检查</a></span>
    </div>
    <div class="root">
        <div class="fileNum">
            <span id="fileNum"></span>
        </div>
        <ul id="filelist"></ul>
    </div>
    <div class="bg_container"></div>
</body>
<script src="/static/jquery.js"></script>
<script>
    $(function () {
        init();
    })
    $(function () {
        if (sessionStorage.getItem('token') !== '') {
            $.ajax({
                type: 'POST',
                url: '/stats',
                headers: {
                    Authorization: 'Bearer ' + sessionStorage.getItem('token')
                },
                success: function (response) {
                    console.log(response.SS);
                    if (response.SS) {
                        $('#checkSafety').text('');
                    }
                },
            })
        }
    })
    function init() {
        $.ajax({
            type: 'GET',
            url: '/getFileList',
            headers: {
                Authorization: 'Bearer ' + sessionStorage.getItem('token')
            },
            success: function (data) {
                console.log(data)
                let total = 0; // 初始化计数器
                $.each(data, function (index, item) {
                    $("#filelist").append(`
                <li>
                    <a href="/download?path=${item.path}" class="downloadBtn">下载</a>
                    ${item.folder}/${item.name}
                    <a style="font-size:xx-small;font-weight:100;">--${getFileSize(item.size)}</a>
                    <button onclick="deleteFile('${item.path}')">删除</button>
                </li>
            `);
                    total++; // 每次循环计数器加1
                });

                // 将总数据条数插入到指定元素中
                $("#fileNum").text(`一共有${total}条数据`);
            }
        });
    }

    function getFileSize(size) {
        if (size < 1024 * 1024) {
            return (size / 1024).toFixed(2) + 'KB'
        } else if (size >= 1024 * 1024 && size < Math.pow(1024, 3)) {
            return (size / 1024.0 / 1024).toFixed(2) + 'MB'
        } else {
            return (size / 1024.0 / 1024 / 1024).toFixed(2) + 'GB'
        }

    }

    function deleteFile(path) {
        var param = { "filePath": path };
        console.log(path)
        if (confirm('确定删除?')) {
            $.ajax({
                type: 'POST',
                url: '/delete',
                data: JSON.stringify(param),
                contentType: 'application/json',
                headers: {
                    Authorization: 'Bearer ' + sessionStorage.getItem('token')
                },
                success: function (data) {
                    window.location.reload();
                },
                error: function (xhr, status, error) {
                    console.error('未通过安全检查：', error);
                    alert('未通过安全检查');
                }
            })
        }

        return false;

    }

</script>

</html>